<template>
    <swiper :options="swiperOption" ref="mySwiper" class="banner2">
        <!-- slides -->
        <swiper-slide>
            <mymenu :menulist="menulist.slice(0,10)"></mymenu>
        </swiper-slide>
        <swiper-slide>
            <mymenu :menulist="menulist.slice(10,20)"></mymenu>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    import mymenu from './mymenu'
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import {mapActions} from 'vuex'

    export default {
        name: "swipter",
        components: {
            swiper,
            swiperSlide,
            mymenu
        },
        methods: {
            ...mapActions({get: 'getMenuList'})
        },
        data() {
            return {
                swiperOption: {
                    pagination: {
                        el: ".swiper-pagination"
                    }
                },
                menulist: []
            };
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted() {

        },
        created() {
            this.get().then(data => {
                this.menulist = data.data.menulist
            })
        },

    }
</script>

<style>
    .banner2 {
        width: 100%;
        height: 130px;
        padding-bottom: 20px;
        touch-action: none;
    }


    .banner2.swiper-slide {
        padding: 0 10px;
        box-sizing: border-box;
        touch-action: none;
        user-select: none;

    }

    .banner2 .swiper-pagination {
        bottom: 5px;
    }

    .banner2 .swiper-pagination .swiper-pagination-bullet {
        width: 15px;
        height: 3px;
        background: #2CC7C5;
        opacity: 0.5;
        border-radius: 5px;
        margin: 0 2px;
    }

    .banner2
    .swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #F0F0F0;
    }

    .banner2 .menu1 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        touch-action: none;
    }

    .banner2 .menu1 li {
        width: 25%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #747474;
        padding: 3px 0;
        box-sizing: border-box;
    }

    .banner2 .menu1 li img {
        width: 40px;
        height: 40px;
    }

    .van-grid-item__content {
        padding: 5px 10px;
        font-size: 12px;
        color: #818181;
    }

</style>